<template>
  <!-- 首页轮播图 -->

  <view v-if="swiperList.length" class="homeSwiper">
    <block v-if="radio === 1">
      <swiper class="homeSwiper-swiper" :indicator-dots="false" :autoplay="true" :circular="false" :vertical="false"
        :interval="interval * 1000" :duration="500" :previous-margin="0 + 'px'"
        :next-margin="0 + 'px'" @change="onChange" :style="{height:`${height}rpx`}">
        <block v-for="(item, index) in swiperList" :key="index">
          <swiper-item class="homeSwiper-swiper__item" @tap.stop="handleTap" :data-index="index">
            <view class="homeSwiper-swiper__image" :style="{padding:`4rpx ${padding}rpx`}">
              <image :data-index="index" :data-key="item.img"
                :class="'skeleton--animate ' + ( 'homeSwiper-swiper--angle' + imageAngle ) + ' ' + getImageClass"
                :src="item.img" mode="aspectFill" :lazy-load="true"></image>
              <!-- 骨架屏，体验有问题，暂时注释 -->
              <!-- <skeleton height="{{height/2}}" loaded="{{item.loaded}}" skeletonKey="{{item.img}}">
          </skeleton> -->
              <button open-type="contact" class="contact-style" v-if="item.link.type===0&&item.link.id===8"></button>
            </view>
          </swiper-item>
        </block>
      </swiper>
    </block>
    <block v-if="radio == 2">
      <view class="kuang"
        :style="{height:`${height}rpx`,padding:`${sidePadding}rpx`}">
        <scroll-view class="homeSwiper-swiper" :enable-flex="true" :scroll-x="true" :enhanced="true"
          :show-scrollbar="false" @change="onChange"
          :style="{height:`${height}rpx`,backgroundImage:`url(${btnImg})`}">
          <!-- <view class="homeSwiper-swiper__view"> -->
          <block v-for="(item, index) in swiperList" :key="index">
            <view class="homeSwiper-swiper__item" @tap.stop="handleTap" :data-index="index"
              :style="{width:'750rpx',marginRight:`${margin}rpx`}">
              <view class="homeSwiper-swiper__image" :style="{padding:`0 ${padding}rpx`}">
                <image :data-index="index" :data-key="item.img"
                  :class="'skeleton--animate ' + ( 'homeSwiper-swiper--angle' + imageAngle ) + ' ' + getImageClass"
                  :src="item.img" mode="aspectFill" :lazy-load="true"></image>
                <button open-type="contact" class="contact-style" v-if="item.link.type===0&&item.link.id===8"></button>
              </view>
            </view>
          </block>
          <view style="width:375rpx;height:100%;display:inline-block;"></view>
          <!-- </view> -->
        </scroll-view>
      </view>
    </block>
    <block v-if="radio === 3">
      <swiper class="homeSwiper-swiper" :indicator-dots="false" :autoplay="true" :circular="true" :vertical="false"
        :interval="interval * 1000" :duration="500" :previous-margin="200 + 'rpx'" :next-margin="200 + 'rpx'"
        @change="onChange" :style="{height:`${height}rpx`}">
        <block v-for="(item, index) in swiperList" :key="index">
          <swiper-item class="homeSwiper-swiper__item" @tap.stop="handleTap" :data-index="index">
            <view class="homeSwiper-swiper__image"
              :style="{transform:curent === index ? 'scale(1, 1)':'scale(0.8, 0.8)',margin:'auto'}">
              <image :data-index="index" :data-key="item.img"
                :class="'skeleton--animate ' + ( 'homeSwiper-swiper--angle' + imageAngle ) + ' ' + getImageClass"
                :src="item.img" mode="aspectFill" :lazy-load="true"></image>
              <!-- 骨架屏，体验有问题，暂时注释 -->
              <!-- <skeleton height="{{height/2}}" loaded="{{item.loaded}}" skeletonKey="{{item.img}}">
          </skeleton> -->
              <button open-type="contact" class="contact-style" v-if="item.link.type===0&&item.link.id===8"></button>
            </view>
          </swiper-item>
        </block>
      </swiper>
    </block>
    <view v-if="radio === 3"></view>
    <view v-else-if="radio === 2"></view>
    <view v-else-if="indicator === 1"
      class="homeSwiper-swiper__indicator homeSwiper-swiper__icat1">
      <text v-for="(ix, idx) in swiperList.length" :key="idx"
        :class="[curent === idx ? 'homeSwiper-swiper__icat1--active' : '']"></text>
    </view>
    <view v-else-if="indicator === 3"
      class="homeSwiper-swiper__indicator homeSwiper-swiper__icat3">
      <text v-for="(ix, idx) in swiperList.length" :key="idx"
        :class="[curent === idx ? 'homeSwiper-swiper__icat1--active' : '']"></text>
    </view>
    <view v-else-if="indicator === 2" class="homeSwiper-swiper__indicator homeSwiper-swiper__icat2"
      :style="{right:`${padding+10}rpx`}">
      <text>{{ curent + 1 }}/{{ swiperList.length }}</text>
    </view>
  </view>
</template>

<script module="image" lang="wxs" src="@/wxs/image.wxs"></script>

<script lang="ts">
  import {
    navtofun
  } from "@/utils/navtofun";
  import {
    Component,
    Vue,
    Prop,
    Watch
  } from 'vue-property-decorator'

  interface LinkSelectItem {
    id: number;
    /** 链接类型 0 -功能页面 FunctionPage 1-商超商品 Goods 2 -展示分类 DisplayClassify 3-自定义页面 CustomPage 4 活动营销 ActivityMarket */
    type: number;
    /** 链接名称 */
    name: string;
    /** 链接地址 */
    url: string;
    /** 附加参数 */
    append: string;
  }

  interface SwiperListItem {
    title: string;
    img: string;
    link: LinkSelectItem;
  }

  /**
   * 轮播图
   */
  interface HomeSwiperFormData {
    type: string;
    swiperList: SwiperListItem[];
    padding: number;
    /** 图片样式 1常规 2投影 */
    imageStyle: number;
    /** 图片倒角 1直角 2圆角 */
    imageAngle: number;
    /** 指示器 1样式一 2样式二 3样式三 */
    indicator: number;
    /** 样式 */
    ImageClass: string;
    /** 当前轮播序列号 */
    curent: number;
    /** 图片高度 */
    height: number;
    /** 轮播类型 */
    radio: number;
    /** 底图 */
    btnImg: string;
    /** 轮播时间 */
    interval: number;
    /** 侧边距 */
    sidePadding: number;
  }

  @Component({})
  export default class GoodsSwiper extends Vue {
    @Prop({
      type: Object
    })
    decoretionProperties: any
    @Watch("decoretionProperties")
    onPropUpdate() {
      this.getProperties(this.decoretionProperties)
      this.getImageClass();
    }

    type: string = "";
    swiperList: SwiperListItem[] = [];
    padding: number = 10;
    /** 图片样式 1常规 2投影 */
    imageStyle: number = 1;
    /** 图片倒角 1直角 2圆角 */
    imageAngle: number = 1;
    /** 指示器 1样式一 2样式二 3样式三 */
    indicator: number = 1;
    /** 样式 */
    ImageClass: string = "";
    /** 当前轮播序列号 */
    curent: number = 0;
    /** 图片高度 */
    height: number = 185;
    /** 轮播类型 */
    radio: number = 1;
    /** 底图 */
    btnImg: string = "";
    /** 轮播时间 */
    interval: number = 1;
    /** 侧边距 */
    sidePadding: number = 10;
    /** 轮播间距 */
    margin: number = 5

    mounted() {
      this.getProperties(this.decoretionProperties)
      this.getImageClass();
    }

    getProperties(formdata) {
      this.type = formdata.type
      this.swiperList = formdata.swiperList
      this.padding = formdata.padding
      this.imageStyle = formdata.imageStyle
      this.imageAngle = formdata.imageAngle
      this.indicator = formdata.indicator
      this.height = formdata.height
      this.radio = formdata.radio
      this.btnImg = formdata.btnImg
      this.interval = formdata.interval
      this.sidePadding = formdata.sidePadding
      this.margin = formdata.margin
    }
    /**
     * 跳转
     */
    handleTap(e) {
      const index: number = e.currentTarget.dataset.index;
      const currentSwiperItem = this.swiperList[index];
      const itemLink = currentSwiperItem.link;
      navtofun(itemLink, this);
    }

    /**
     * 获取图片样式
     */
    getImageClass() {
      // 1常规 2投影
      const styles = ["homeSwiper-swiper__boxNM", "homeSwiper-swiper__boxCP"];
      // 图片倒角 1直角 2圆角
      const angles = ["homeSwiper-swiper__corners", "homeSwiper-swiper__angle"];
      const gs = styles[+this.imageStyle - 1];
      const as = angles[+this.imageAngle - 1];
      this.ImageClass = `${gs} ${as}`
    }

    /**
     * 轮播切换
     */
    onChange(e) {
      this.curent = e.detail.current
    }
  };
</script>

<style lang="scss" scoped>
  @include b(homeSwiper) {
    background-color: #ffffff;
    position: relative;
  }

  @include b(homeSwiper-swiper) {
    height: 100%;
    white-space: nowrap;
    background-size: 100% 100%;

    @include e(view) {
      height: 100%;
      display: flex;
      white-space: nowrap;
    }

    @include e(item) {
      height: 100%;
      display: inline-block;
    }

    @include e(image) {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding-top: 2px;
      transition: transform 0.5s;

      image {
        display: block;
        width: 100%;
        height: 100%;
      }
    }

    @include m(angle1) {
      border-radius: 0rpx;
    }

    @include m(angle2) {
      border-radius: 20rpx;
    }

    @include e(boxNM) {
      box-shadow: none;
    }

    @include e(boxCP) {
      box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    }

    @include e(corners) {
      border-radius: 0px;
    }

    @include e(angle) {
      border-radius: 7px;
    }

    @include e(indicator) {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      bottom: 10px;
      // border: 1px solid red;
      height: 20px;
      width: 100%;
      box-sizing: border-box;
    }

    @include e(icat1) {
      text {
        display: inline-block;
        width: 8px;
        height: 8px;
        background-color: #ebedf0;
        opacity: 0.3;
        margin-right: 6px;
        border-radius: 50%;
      }

      @include m(active) {
        opacity: 0.8 !important;
        background-color: #fff !important;
      }
    }

    @include e(icat2) {
      position: absolute;
      right: 0;
      bottom: 15px;
      display: block;

      text {
        float: right;
        box-sizing: border-box;
        padding: 5px 12px;
        background-color: rgba(0, 0, 0, 0.2);
        color: #fff;
        font-size: 13px;
        border-radius: 16px;
      }
    }

    @include e(icat3) {
      text {
        display: inline-block;
        width: 22px;
        height: 3px;
        background-color: #ebedf0;
        opacity: 0.3;
        margin-right: 6px;
        border-radius: 4px;
      }

      @include m(active) {
        opacity: 0.8 !important;
        background-color: #fff !important;
      }
    }
  }

  @include b(contact-style) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }

  .kuang {
    width: 100%;
  }
</style>>